<template>
	<view class="main" :style="{backgroundImage: 'url(' +  IMAGE_URL +'/static/images/user/point-list-bg.png)' }">
		<header-vue :back="true" :searchStatus="true" bgColor="transparent">
			<template v-slot:search>
				<view class="select-box">
					<view class="" @click="goBack">
						<u-icon name="arrow-left" size="18" color="#222222"></u-icon>
					</view>
					<view class="order-title">积分中心</view>
					<view class="right-title" @click="toPointList">兑换记录</view>
				</view>
			</template>
		</header-vue>

		<view class="point-icon-box">
			<view class="d-flex align-items-center">
				<view class="point-icon">
					<image :src=" IMAGE_URL + '/static/images/user/point-icon-blue.png'"></image>
				</view>
				<view class="font24 text-333333">我的积分</view>
			</view>
		</view>
		<view class="position-relative pl-32rpx">
			<view class="fz-64 text-333333 pt-20rpx mb-40rpx">100</view>
			<view class="position-absolute use-text text-333333 font32">赚积分</view>
		</view>
		<scroll-view scroll-y  class="scroll-height-style">
			<view class="point-prd-box px-32rpx py-28rpx">
				<view class="d-flex flex-wrap justify-content-between box-radius">
					<view class="prd-bg mb-28rpx">
						<view class="prd-img">
							<image :src="IMAGE_URL + '/static/images/user/prd-img.png' "></image>
						</view>
						<view class="px-16rpx pb-22rpx">
							<view class="fz-28 text-333333 line-overflow-1 mb-8rpx">五得利中筋面粉10斤</view>
							<view class="fz-20 text-999999 mb-8rpx">库存:100</view>
							<view class="d-flex justify-content-between align-content-center">
								<view class="fz-32 text-FF4141">50积分</view><view class="btn" @click="toDetial">立即兑换</view>
							</view>
						</view>
					</view>
					<view class="prd-bg mb-28rpx">
						<view class="prd-img">
							<image :src=" IMAGE_URL + '/static/images/user/prd-img.png' "></image>
						</view>
						<view class="px-16rpx pb-22rpx">
							<view class="fz-28 text-333333 line-overflow-1 mb-8rpx">五得利中筋面粉10斤</view>
							<view class="fz-20 text-999999 mb-8rpx">库存:100</view>
							<view class="d-flex justify-content-between align-content-center">
								<view class="fz-32 text-FF4141">50积分</view><view class="btn noPoint">积分不足</view>
							</view>
						</view>
					</view>
					<view class="prd-bg mb-28rpx">
						<view class="prd-img">
							<image :src="IMAGE_URL + '/static/images/user/prd-img.png' "></image>
						</view>
						<view class="px-16rpx pb-22rpx">
							<view class="fz-28 text-333333 line-overflow-1 mb-8rpx">五得利中筋面粉10斤</view>
							<view class="fz-20 text-999999 mb-8rpx">库存:100</view>
							<view class="d-flex justify-content-between align-content-center">
								<view class="fz-32 text-FF4141">50积分</view><view class="btn noPoint">积分不足</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</scroll-view>
	
	</view>

</template>

<script>
	import headerVue from '@/components/header.vue'
	import appConfig from '@/config/app.js'
	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
			}
		},
		components: {
			headerVue,
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			toPointList(){
				uni.navigateTo({
					url:'/views-user/points/points-list'
				})
			},
			toDetial(){
				uni.navigateTo({
					url:'/views-user/points/points-detail'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../common/public.scss");
	.main {
		width: 100%;
		height: 100vh;
	//	background-image: url('/static/images/user/point-list-bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.select-box {
		padding: 0 32rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		//background: $uni-bg-color;
		box-sizing: border-box;

		.order-title {
			font-size: 32rpx;
			color: #333333;
		}
		.right-title {
			color: #0785CF;
			font-size: 28rpx;
		}
	}
	.point-icon-box{
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;
	}
	.point-icon{
		width: 24rpx;
		height: 24rpx;
		image{
			width: 24rpx;
			height: 24rpx;
			vertical-align: top;
		}
	}
	.use-text{
		width: 144rpx;
		height: 60rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 60rpx 0rpx 0rpx 60rpx;
		right:32rpx;
		top:0;
		line-height: 60rpx;
		text-align: center;
		border-radius: 60rpx;
		
	}
	.scroll-height-style{
		background: #FFFFFF;
			height:calc(100vh - var(--status-bar-height) - 88rpx - 10rpx - 240rpx ); 
	}
	.point-prd-box{
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0 0;
	
		.text-FF4141{
			color:#FF4141;
			
			}
		.box-radius{
			border-radius: 30rpx;
		}
		.prd-bg{
			box-shadow: 0px 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			.btn{
				width: 136rpx;
				height: 44rpx;
				background: #1CA8FF;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				color:#ffffff;
				font-size: 24rpx;
				text-align: center;
				line-height: 44rpx;
			}
			.noPoint{
				background: #999999;
			}
		}
		.prd-img{
			width: 332rpx;
			height: 267rpx;
			margin-bottom: 16rpx;
			image{
				width: 332rpx;
				height: 267rpx;
			}
		}
	
	}

		
	
</style>